import React,{useState} from 'react'
import { SearchOutlined } from "@ant-design/icons";
import Audio from './SourceMaterials/Audio';
import Img from './SourceMaterials/Img';
import SourceMaterial from './SourceMaterials/SourceMaterial';
import Video from './SourceMaterials/Video';
import "./style.css"
const Index:React.FC = () => {
  const [activeTab, setActiveTab] = useState('素材');

  const tabs = ['素材', '图片','视频', '音频'];
  return (
    <div className='SourceMaterial'>
      <div className="headerInpas">
        <SearchOutlined /><input type="text" placeholder='搜索素材' />
      </div>
      <div className="SourceMaterialTabBtn">
          {tabs.map(tab => (
          <button
          style={{borderBottom:'1px #cccccc00 solid',borderRadius:'0%'}}
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={activeTab === tab ? 'actives' : ''}
          >
            {tab}
          </button>
        ))}
      </div>
      <div className='SourceMaterialTabBox'>
        {activeTab === '素材' && <div><SourceMaterial></SourceMaterial></div>}
        {activeTab === '图片' && <div><Img></Img></div>}
        {activeTab === '视频' && <div><Video></Video></div>}
        {activeTab === '音频' && <div><Audio></Audio></div>}
      </div>
    </div>
  )
}

export default Index
